<template>
    <div class="chat-container">
        <div class="nav-header">
            <router-link to="/" class="back-btn">← 返回首页</router-link>
            <div class="divider"></div>
        </div>

        <div class="main-layout">
            <!-- 左侧会话列表面板 -->
            <div class="session-panel">
                <SessionList
                        :currentSession="currentSession"
                        :character="router.currentRoute.value.params.character"
                        :userId="userId.value"
                        @sessionSelect="loadSessionChat"
                        @sessionCreate="createNewSession"
                        @sessionDelete="deleteSession"
                />
            </div>

            <!-- 中间角色面板 -->
            <div class="avatar-panel">
                <div class="avatar-box">
                    <button class="call-btn" @click="startVoiceChat">
                        语音通话
                    </button>
                    <!-- 使用动态角色视频/图片 -->
                    <video v-if="currentCharacter.animationPath && currentCharacter.animationPath.endsWith('.mp4')"
                           class="avatar-img" autoplay loop muted playsinline>
                        <source :src="currentCharacter.animationPath" type="video/mp4">
                        您的浏览器不支持视频标签。
                    </video>
                    <img v-else-if="currentCharacter.imageUrl" class="avatar-img" :src="currentCharacter.imageUrl"
                         :alt="currentCharacter.characterName">
                    <!-- 如果既没有animationPath也没有imageUrl，显示默认图片 -->
                    <img v-else class="avatar-img" src="/imgs/harry_potter.png" alt="AI角色">
                </div>
            </div>

            <!-- 右侧聊天面板 -->
            <div class="chat-panel">
                <div class="chat-card" id="chatCard">
                    <div id="chatBubbleList">
                        <ChatBubble
                                v-for="message in messages"
                                :key="message.id"
                                :message="message"
                        />
                    </div>
                    <div class="audio-status-container">
                        <audio id="chatAudioPlayer" controls class="audio-player"></audio>
                        <div id="chatStatus" class="status" v-if="statusMessage"
                             :class="statusClass">
                            {{ statusMessage }}
                        </div>
                    </div>
                </div>

                <!-- 输入区域 -->
                <div class="input-area">
                    <!-- 模式切换按钮 -->
                    <button id="modeToggleBtn" class="mode-toggle-btn" @click="toggleChatMode">
                        <i>{{ chatMode === 'text' ? '🎤' : '📝' }}</i>
                    </button>

                    <!-- 文字输入区域 -->
                    <div id="textInputArea" v-show="chatMode === 'text'" class="text-input-wrapper">
                        <textarea class="form-control" v-model="inputText" placeholder="请输入您想对AI说的话..."
                                  :disabled="isProcessing"
                                  @keydown.enter.ctrl="sendTextMessage"></textarea>
                        <button id="chatBtn" class="send-btn" @click="sendTextMessage" :disabled="isProcessing">
                            发送消息
                        </button>
                    </div>

                    <!-- 语音输入区域 -->
                    <div id="voiceInputArea" v-show="chatMode === 'voice'" class="voice-input-wrapper">
                        <button id="voiceRecordBtn" class="voice-record-btn"
                                @mousedown="startVoiceRecording"
                                @mouseup="stopVoiceRecording"
                                @mouseleave="stopVoiceRecording"
                                @touchstart.prevent="startVoiceRecording"
                                @touchend.prevent="stopVoiceRecording"
                                :disabled="isProcessing || isRecording">
                            {{ isRecording ? '松开发送' : '按住 说话' }}
                        </button>
                    </div>
                </div>
                <!-- 推荐提问区域 -->
                <div class="suggested-questions" v-if="chatMode === 'text' && suggestedQuestions.length > 0">
                    <div class="suggested-title">💡 推荐提问:</div>
                    <div class="suggested-list">
                        <button v-for="(question, index) in suggestedQuestions"
                                :key="index"
                                class="suggested-question-btn"
                                @click="selectSuggestedQuestion(question)">
                            {{ question }}
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
import {ref, onMounted, onUnmounted, computed, watch} from 'vue';
import {useRouter} from 'vue-router';
import ChatBubble from '@/components/ChatBubble.vue';
import SessionList from '@/components/SessionList.vue';

// 导入services
import {startRecording, stopRecording, saveAudioToServer} from '@/services/audioService';
import {
    loadSessions,
    createSession,
    loadSessionMessages,
    deleteSession as deleteSessionService,
    updateSessionTitle
} from '@/services/sessionService';
import {
    initWebSocket,
    sendTextMessage as sendTextMessageService,
    sendVoiceChat as sendVoiceChatService,
    sendConfig
} from '@/services/chatService';
// 导入获取角色详情的服务
import {getCharacterByRoleKey} from '@/services/characterService';
// 新增：导入获取当前用户ID的函数
import {getCurrentUserId} from '@/services/authService';

const router = useRouter();
const messages = ref([]);
const inputText = ref('');
const currentSession = ref(null);
const isProcessing = ref(false);
const statusMessage = ref('');
const statusType = ref('');
const chatMode = ref('text'); // 'text' 或 'voice'
const isRecording = ref(false);
// 添加当前角色信息
const currentCharacter = ref({
    characterName: '',
    animationPath: '',
    voiceId: '',
    welcomeMessage: '',
    prompt: ''
});
// 推荐提问列表
const suggestedQuestions = ref([]);

// 全局变量
let pcmData = [];
let ws = null;
let sessionId = '';


// 从本地存储获取用户ID
const userId = ref(getCurrentUserId());
let isPlaying = false;
let audioQueue = [];
let mediaSource = null;
let sourceBuffer = null;
let audioUrl = '';

// 计算状态样式类名
const statusClass = computed(() => {
    return `status-${statusType.value}`;
});
// 初始化
onMounted(() => {
    // 先加载角色详情
    const roleKey = router.currentRoute.value.params.character;
    loadCharacterDetails(roleKey).then(() => {
        // 然后加载会话列表
        loadSessionList().then(() => {
            // 检查是否有现有会话
            const sessionListElement = document.getElementById('sessionList');

            if (!sessionListElement || sessionListElement.innerHTML.includes('暂无对话历史')) {
                console.log('没有现有会话，创建新会话');
                createNewSession(true); // 传递参数表示需要显示欢迎消息
            } else {
                console.log('有现有会话，加载最近的会话');
                loadLatestSession();
            }
        });
    });
});
// 加载最近的会话
const loadLatestSession = async () => {
    try {
        // 获取当前角色标识并传递给loadSessions函数
        const characterRoleKey = router.currentRoute.value.params.character;
        const sessions = await loadSessions(userId.value, characterRoleKey);

        if (sessions && sessions.length > 0) {
            // 假设返回的列表已经按时间排序，取第一个作为最近的会话
            const latestSession = sessions[0];
            await loadSessionChat(latestSession);
            showStatus('完成', '已加载最近会话', 'success');
        }
    } catch (error) {
        console.error('加载最近会话失败:', error);
        // 加载失败时创建新会话
        createNewSession(true);
    }
};

// 显示状态信息
const showStatus = (title, message, type) => {
    statusMessage.value = message || title;
    statusType.value = type || 'info';

    // 自动隐藏非错误状态
    if (type !== 'error') {
        setTimeout(() => {
            statusMessage.value = '';
        }, 3000);
    }
};

// 加载会话列表
const loadSessionList = async () => {
    try {
        // 传递当前角色的标识给loadSessions函数
        const characterRoleKey = router.currentRoute.value.params.character;
        const sessions = await loadSessions(userId.value, characterRoleKey);
        console.log('会话列表:', sessions);
    } catch (error) {
        console.error('加载会话列表失败:', error);
    }
};

// 处理文本消息
const processText = (text) => {
    let aiMessage = messages.value.find(msg => msg.role === 1 && !msg.complete);

    if (!aiMessage) {
        aiMessage = {
            id: Date.now(),
            content: '',
            role: 1, // AI
            timestamp: new Date(),
            complete: false
        };
        messages.value.push(aiMessage);
    }

    let processedText = text.replace(/\*\*([^*]+?)\*\*/g, '<strong>$1</strong>');
    aiMessage.content += processedText;
};

// 处理完成消息
const handleCompleteMessage = (data) => {
    isProcessing.value = false;
    showStatus('完成', 'AI回复已完成', 'success');

    // 标记最后一条AI消息为完成
    const lastAiMessage = messages.value.findLast(msg => msg.role === 1);
    if (lastAiMessage) {
        lastAiMessage.complete = true;
    }

    // 重新加载会话列表
    setTimeout(() => {
        loadSessionList();
    }, 1500);
};

// 处理错误消息
const handleErrorMessage = (data) => {
    console.error('处理错误:', data.message);
    showStatus('错误', data.message || '处理失败', 'error');
    isProcessing.value = false;
};

// 处理音频片段
const handleAudioSegment = (audioBase64, sequence) => {
    try {
        // 检查音频数据是否有效
        if (!audioBase64 || typeof audioBase64 !== 'string' || audioBase64.trim() === '') {
            console.warn('接收到无效的音频数据，跳过处理');
            return;
        }

        // 如果是第一个音频片段，初始化MediaSource
        if (!mediaSource) {
            initMediaSource();
        }

        // 将base64转换为ArrayBuffer
        const binaryString = atob(audioBase64);
        const len = binaryString.length;
        const bytes = new Uint8Array(len);
        for (let i = 0; i < len; i++) {
            bytes[i] = binaryString.charCodeAt(i);
        }

        // 添加到音频队列
        audioQueue.push(bytes.buffer);
        console.log('音频队列大小:', audioQueue.length, '当前序列:', sequence);

        // 如果sourceBuffer已准备好且不在更新状态，立即处理队列
        if (sourceBuffer && !sourceBuffer.updating && audioQueue.length > 0) {
            const firstAudioChunk = audioQueue.shift();
            appendToSourceBuffer(firstAudioChunk);
        }

        // 检查是否为最后一个音频片段
        if (sequence < 0) {
            console.log('收到最后一个音频片段');
            // 标记为正在播放
            isPlaying = true;

            // 当队列处理完毕后结束流
            if (audioQueue.length === 0 && sourceBuffer && !sourceBuffer.updating) {
                mediaSource.endOfStream();
            }
        }
    } catch (error) {
        console.error('处理音频片段失败:', error);
        // 出错时尝试降级处理
        fallbackToCompleteAudio();
    }
};

// 初始化MediaSource
const initMediaSource = () => {
    try {
        mediaSource = new MediaSource();

        // 当MediaSource准备就绪时
        mediaSource.addEventListener('sourceopen', () => {
            try {
                // 为mp3格式创建sourceBuffer
                const mimeType = 'audio/mpeg';
                if (MediaSource.isTypeSupported(mimeType)) {
                    sourceBuffer = mediaSource.addSourceBuffer(mimeType);

                    // 监听updateend事件，处理队列中的音频片段
                    sourceBuffer.addEventListener('updateend', () => {
                        if (audioQueue.length > 0 && !sourceBuffer.updating) {
                            const nextAudioChunk = audioQueue.shift();
                            appendToSourceBuffer(nextAudioChunk);
                        }
                    });

                    // 如果队列中已有音频片段，立即处理
                    if (audioQueue.length > 0) {
                        const firstAudioChunk = audioQueue.shift();
                        appendToSourceBuffer(firstAudioChunk);
                    }
                } else {
                    console.error('浏览器不支持音频格式: ' + mimeType);
                    // 降级处理：使用传统方式播放完整音频
                    fallbackToCompleteAudio();
                }
            } catch (error) {
                console.error('初始化sourceBuffer失败:', error);
                fallbackToCompleteAudio();
            }
        });

        // 设置音频源
        audioUrl = URL.createObjectURL(mediaSource);
        const audioPlayer = document.getElementById('chatAudioPlayer');
        if (audioPlayer) {
            audioPlayer.src = audioUrl;

            // 尝试自动播放，但添加更友好的用户交互提示
            audioPlayer.play().catch(e => {
                console.log('自动播放被阻止，等待用户交互后播放:', e);
                showStatus('提示', '请点击播放器播放AI回复', 'info');
            });
        }
    } catch (error) {
        console.error('初始化MediaSource失败:', error);
        fallbackToCompleteAudio();
    }
};

// 添加音频数据到sourceBuffer
const appendToSourceBuffer = (audioData) => {
    try {
        if (sourceBuffer && mediaSource && mediaSource.readyState === 'open') {
            sourceBuffer.appendBuffer(audioData);
            // 确保音频在添加数据后处于播放状态
            const audioPlayer = document.getElementById('chatAudioPlayer');
            if (audioPlayer && audioPlayer.paused) {
                audioPlayer.play().catch(e => {
                    console.log('自动播放被阻止，等待用户交互后播放:', e);
                });
            }
        }
    } catch (error) {
        console.error('追加音频数据失败:', error);
        fallbackToCompleteAudio();
    }
};

// 降级处理：使用传统方式播放完整音频
const fallbackToCompleteAudio = () => {
    console.log('使用降级方案播放音频');
    // 收集所有音频数据
    let completeAudioData = new Blob(audioQueue, {type: 'audio/mpeg'});
    let audioUrl = URL.createObjectURL(completeAudioData);
    const audioPlayer = document.getElementById('chatAudioPlayer');
    if (audioPlayer) {
        audioPlayer.src = audioUrl;
        audioPlayer.play().then(() => {
            console.log('降级模式下音频播放成功');
        }).catch(e => {
            console.error('降级模式下播放失败:', e);
            showStatus('提示', '请点击播放按钮收听AI回复', 'info');
        });
    }
};

// 语音通话功能
const startVoiceChat = () => {
    toggleChatMode();
};

// 发送文本消息 - 确保有会话ID
const sendTextMessage = () => {
    if (!inputText.value.trim() || isProcessing.value) return;

    // 确保有有效的会话ID
    if (!sessionId) {
        showStatus('错误', '请先创建会话', 'error');
        return;
    }

    // 添加用户消息
    messages.value.push({
        id: Date.now(),
        content: inputText.value.trim(),
        role: 0, // 用户
        timestamp: new Date(),
        complete: true
    });

    // 保存用户输入，以便后续使用
    const userMessage = inputText.value.trim();

    // 清空输入
    inputText.value = '';

    // 模拟AI响应
    isProcessing.value = true;
    showStatus('思考中', 'AI正在回复...', 'info');

    // 获取当前角色的voiceId和prompt
    const voiceId = currentCharacter.value.voiceId || '';
    const prompt = currentCharacter.value.prompt || '';

    // 修复：检查是否是用户发送的第一条消息（而不是总消息数）
    const userMessagesCount = messages.value.filter(msg => msg.role === 0).length;
    console.log('用户发送的消息数量:', userMessagesCount);
    // 发送文本消息函数中的简化部分
    if (userMessagesCount === 1) {
        // 截取前30个字符作为标题
        const title = userMessage.substring(0, Math.min(userMessage.length, 30)) +
            (userMessage.length > 30 ? '...' : '');
        
        // 检查currentSession是否有效
        if (!currentSession.value || !currentSession.value.id) {
            console.error('当前会话对象或会话ID无效，无法更新标题');
            return;
        }
        
        console.log('使用的会话ID:', currentSession.value.id, '字段类型:', typeof currentSession.value.id);
        
        // 使用标准化的ID更新标题
        updateSessionTitle(currentSession.value.id, title)
            .then(() => {
                console.log('会话标题已更新');
                // 更新本地会话对象的标题
                currentSession.value.title = title;
                // 立即刷新会话列表，确保显示更新后的标题
                loadSessionList();
            })
            .catch(error => {
                console.error('更新会话标题失败:', error);
            });
    }
    // 初始化WebSocket连接并发送文本消息
    if (!ws || ws.readyState !== WebSocket.OPEN) {
        ws = initWebSocket(handleWebSocketMessage);
        // 延迟发送消息，确保WebSocket连接建立
        setTimeout(() => {
            if (ws && ws.readyState === WebSocket.OPEN) {
                // 使用保存的用户消息，而不是从已清空的输入框中获取
                sendTextMessageService(ws, userMessage, userId.value, sessionId, currentCharacter.value.characterName, voiceId, prompt);
            }
        }, 500);
    } else {
        // 使用保存的用户消息
        sendTextMessageService(ws, userMessage, userId.value, sessionId, currentCharacter.value.characterName, voiceId, prompt);
    }
};

// WebSocket消息处理
const handleWebSocketMessage = (data) => {
    try {
        console.log('收到WebSocket消息:', data);

        // 处理不同类型的消息
        switch (data.type) {
            case 'connected':
                // 连接成功
                showStatus('连接成功', 'WebSocket连接已建立', 'info');
                break;
            case 'status':
                // 状态更新
                showStatus('处理中', data.message, 'info');
                break;
            case 'text_segment':
            case 'stream_text':
                // 流式文本回复
                processText(data.content || data.text);
                break;
            case 'complete':
                // 处理完成
                handleCompleteMessage(data);
                break;
            case 'error':
                // 错误处理
                handleErrorMessage(data);
                break;
            case 'asr_result':
                // 语音识别结果
                showStatus('识别完成', '语音识别结果: ' + data.text, 'info');
                break;
            case 'audio_segment':
                // 音频片段处理
                handleAudioSegment(data.audioData || data.data, data.sequence || 0);
                break;
            case 'config_ack':
                // 配置确认
                console.log('配置已确认:', data.message);
                break;
        }
    } catch (error) {
        console.error('解析WebSocket消息失败:', error);
    }
};

// 切换聊天模式
const toggleChatMode = () => {
    chatMode.value = chatMode.value === 'text' ? 'voice' : 'text';
};

// 开始录音
const startVoiceRecording = async () => {
    if (isProcessing.value || isRecording.value) return;

    try {
        isRecording.value = true;
        showStatus('录音中', '正在录制音频...', 'info');

        await startRecording();
    } catch (error) {
        console.error('启动录音失败:', error);
        showStatus('错误', '无法启动录音：' + error.message, 'error');
        isRecording.value = false;
    }
};

// 停止录音 - 修复参数传递和WebSocket通信
const stopVoiceRecording = async () => {
    if (!isRecording.value) return;

    isRecording.value = false;

    try {
        // 获取录音数据
        pcmData = await stopRecording();

        // 处理录音数据
        if (pcmData.length > 0) {
            // 确保有有效的会话ID
            if (!sessionId) {
                showStatus('错误', '请先创建会话', 'error');
                return;
            }

            // 创建语音消息气泡
            messages.value.push({
                id: Date.now(),
                content: '[语音消息]',
                role: 0, // 用户
                timestamp: new Date(),
                complete: true
            });

            showStatus('处理中', '正在上传录音文件...', 'info');
            isProcessing.value = true;

            // 直接传递pcmData，让service处理Blob转换
            const savedFilePath = await saveAudioToServer(pcmData, sessionId, userId.value);

            // 获取当前角色的voiceId和prompt
            const voiceId = currentCharacter.value.voiceId || '';
            const prompt = currentCharacter.value.prompt || '';

            // 初始化WebSocket连接并发送语音聊天请求
            if (!ws || ws.readyState !== WebSocket.OPEN) {
                ws = initWebSocket(handleWebSocketMessage);
            }

            // 等待WebSocket连接建立后发送语音聊天请求
            setTimeout(() => {
                if (ws && ws.readyState === WebSocket.OPEN) {
                    sendVoiceChatService(ws, savedFilePath, sessionId, userId.value, currentCharacter.value.characterName, voiceId, prompt);
                    showStatus('处理中', '正在识别并生成回复...', 'info');
                } else {
                    showStatus('错误', 'WebSocket连接失败，无法处理语音消息', 'error');
                    isProcessing.value = false;
                }
            }, 500);
        } else {
            showStatus('提示', '录音时间太短', 'info');
        }
    } catch (error) {
        console.error('停止录音失败:', error);
        showStatus('错误', '停止录音失败: ' + error.message, 'error');
        isProcessing.value = false;
    }
};

// 创建新会话
const createNewSession = async (showWelcomeMessage = false) => {
    try {
        showStatus('创建中', '正在创建新会话...', 'info');

        // 使用从路由参数获取的角色信息
        const roleKey = router.currentRoute.value.params.character || 'harry_potter';

        // 首先获取角色详情
        await loadCharacterDetails(roleKey);

        const newSession = await createSession(userId.value, roleKey, '新会话');

        // 修复：确保 currentSession.value 包含 id 字段
        if (newSession) {
            // 创建一个包含必要字段的新对象
            const sessionWithProperId = {
                ...newSession,
                // 确保有 id 字段，如果后端返回的是 sessionId，则将其赋值给 id
                id: newSession.id || newSession.sessionDbId || newSession.sessionId
            };
            
            sessionId = newSession.sessionId || newSession.id || newSession.sessionDbId;
            currentSession.value = sessionWithProperId;
            messages.value = [];

            // 如果需要显示欢迎消息，使用角色的欢迎语
            if (showWelcomeMessage && currentCharacter.value.welcomeMessage) {
                messages.value.push({
                    id: Date.now() - 1000,
                    content: currentCharacter.value.welcomeMessage,
                    role: 1, // AI
                    timestamp: new Date(Date.now() - 1000),
                    complete: true
                });
            }

            showStatus('成功', '新会话创建成功', 'success');
        }
    } catch (error) {
        console.error('创建新会话失败:', error);
        showStatus('错误', '创建新会话失败: ' + error.message, 'error');
    }
};

// 加载会话聊天记录
const loadSessionChat = async (session) => {
    // 增加会话对象有效性检查
    if (!session || typeof session !== 'object') {
        showStatus('错误', '无效的会话数据', 'error');
        return;
    }

    console.log('加载会话:', session); // 添加调试日志
    currentSession.value = session;
    // 优先使用sessionId，但也能处理后端返回的id字段
    sessionId = session.sessionId || session.id || '';
    messages.value = [];
    showStatus('加载中', '正在加载历史消息...', 'info');

    try {
        // 确保有有效的数据库ID
        let dbId;

        // 打印会话对象的所有字段，便于调试
        console.log('会话对象字段:', Object.keys(session));

        // 尝试多种可能的ID字段名，增强兼容性
        if (session.sessionDbId) {
            dbId = Number(session.sessionDbId);
        } else if (session.id) {
            dbId = Number(session.id);
        } else if (session.sessionId) {
            dbId = Number(session.sessionId);
        } else {
            throw new Error('会话数据库ID无效');
        }

        if (isNaN(dbId)) {
            throw new Error('会话数据库ID不是有效数字');
        }

        console.log('使用的数据库ID:', dbId); // 添加调试日志

        const sessionMessages = await loadSessionMessages(dbId);
        console.log('加载的消息:', sessionMessages); // 添加调试日志

        // 增强消息处理逻辑，确保数据格式正确
        messages.value = sessionMessages.map(msg => ({
            ...msg,
            complete: true,
            // 确保消息对象包含必要的字段
            id: msg.id || Date.now(),
            content: msg.content || '',
            role: msg.role === undefined ? 0 : msg.role,
            timestamp: msg.timestamp ? new Date(msg.timestamp) : new Date()
        }));

        showStatus('完成', '历史消息加载完成', 'success');
    } catch (error) {
        console.error('加载会话消息失败:', error);
        showStatus('错误', '加载历史消息失败: ' + error.message, 'error');
    }
};

// 删除会话
const deleteSession = async (sessionIdToDelete) => {
    try {
        showStatus('删除中', '正在删除会话...', 'info');

        await deleteSessionService(sessionIdToDelete);

        // 修复：检查条件改为使用id字段，因为后端返回的是数据库id
        if (sessionIdToDelete === currentSession.value?.id) {
            messages.value = [];
            currentSession.value = null;
            sessionId = '';

            // 移除自动创建新会话的逻辑
            // 可以选择添加一个提示，让用户知道需要手动创建新会话
            showStatus('提示', '会话已删除，您可以点击"新建会话"开始新的对话', 'info');
        }

        // 立即重新加载会话列表
        loadSessionList();

        showStatus('成功', '会话删除成功', 'success');
    } catch (error) {
        console.error('删除会话失败:', error);
        showStatus('错误', '删除会话失败: ' + error.message, 'error');
    }
};

// 生成推荐提问
const generateSuggestedQuestions = (character) => {
    // 清空之前的推荐
    suggestedQuestions.value = [];

    // 根据角色信息生成个性化推荐提问
    const baseQuestions = [];

    // 基础通用问题
    baseQuestions.push(`你好${character.characterName}，今天过得怎么样？`);
    baseQuestions.push(`能给我介绍一下你自己吗？`);

    // 根据角色特点生成特定问题
    if (character.roleKey === 'harry_potter') {
        baseQuestions.push('在霍格沃茨的生活怎么样？');
        baseQuestions.push('你最喜欢的科目是什么？');
        baseQuestions.push('能给我讲讲魁地奇比赛的规则吗？');
    } else if (character.roleKey === 'wangye') {
        baseQuestions.push('你如何理解"道"？');
        baseQuestions.push('对于当前的生活，你有什么建议吗？');
        baseQuestions.push('能分享一个你认为有哲理的故事吗？');
    } else if (character.roleKey === 'hatsune_miku') {
        baseQuestions.push('你会唱哪些歌曲？');
        baseQuestions.push('作为虚拟歌手，你觉得最有趣的事情是什么？');
        baseQuestions.push('能教我一些音乐知识吗？');
    }

    // 添加一些通用的开放式问题
    baseQuestions.push('你有什么爱好？');
    baseQuestions.push('你觉得什么是真正的友谊？');

    // 随机选择5个问题作为推荐（避免显示太多）
    const shuffled = [...baseQuestions].sort(() => 0.5 - Math.random());
    suggestedQuestions.value = shuffled.slice(0, 4);
};

// 选择推荐提问并发送
const selectSuggestedQuestion = (question) => {
    inputText.value = question;
    sendTextMessage();
};

// 加载角色详情
const loadCharacterDetails = async (roleKey) => {
    try {
        const response = await getCharacterByRoleKey(roleKey);
        if (response.code === 1 && response.data) {
            // 更新当前角色信息
            currentCharacter.value = {
                characterName: response.data.characterName || 'AI助手',
                animationPath: response.data.animationPath || '',
                voiceId: response.data.voiceId || '',
                welcomeMessage: response.data.welcomeMessage || '',
                prompt: response.data.prompt || '',  // 新增：保存角色提示词
                roleKey: roleKey  // 保存角色key用于推荐问题
            };
            // 生成推荐提问
            generateSuggestedQuestions(currentCharacter.value);
        }
    } catch (error) {
        console.error('加载角色详情失败:', error);
        // 使用默认值
        currentCharacter.value = {
            characterName: 'AI助手',
            animationPath: '',
            voiceId: '',
            welcomeMessage: '你好！我是你的AI助手。',
            prompt: '',  // 新增：默认空提示词
            roleKey: roleKey
        };
        generateSuggestedQuestions(currentCharacter.value);
    }
};

// 监听路由参数变化，重新加载角色详情
watch(() => router.currentRoute.value.params.character, (newCharacter) => {
    if (newCharacter && newCharacter !== router.currentRoute.value.params.character) {
        loadCharacterDetails(newCharacter);
    }
});

// 组件卸载时清理资源
onUnmounted(() => {
    if (ws) {
        ws.close();
    }
});
</script>

<style scoped>
.chat-container {
    width: 100%;
    height: 100vh;
    display: flex;
    flex-direction: column;
}

.nav-header {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 20px 0;
}

.back-btn {
    display: inline-block;
    font-size: 16px;
    color: #564fb3;
    background: #e0dfee;
    border: none;
    border-radius: 16px;
    padding: 8px 24px;
    text-decoration: none;
    box-shadow: 0 2px 8px rgba(108, 99, 255, 0.1);
    transition: background 0.2s;
}

.back-btn:hover {
    background: #d0c9e8;
}

.divider {
    flex: 1;
    height: 2px;
    background: #e5e5e5;
}

/* 主布局容器 - 优化间距和padding */
.main-layout {
    flex: 1;
    display: flex;
    gap: 24px; /* 增加面板间距 */
    height: calc(100vh - 100px);
    padding: 16px;
}

/* 会话面板样式 - 调整宽度 */
.session-panel {
    width: 220px; /* 从260px进一步减小到220px */
    background: #fff;
    border-radius: 20px;
    display: flex;
    flex-direction: column;
    box-shadow: 0 2px 16px rgba(0, 0, 0, 0.06);
    /* padding: 16px; */
    /* border: 2px solid #353535; */
}

/* 角色面板样式 - 进一步减小宽度 */
.avatar-panel {
    width: 280px; /* 从300px减小到280px */
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* 角色盒子样式优化 */
.avatar-box {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(180deg, #ffffff 0%, #fff 100%);
    border-radius: 24px;
    box-shadow: 0 8px 32px 0 rgb(255, 255, 255);
}

/* 添加缺失的avatar-img样式 */
.avatar-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 28px;
    box-shadow: 0 0 48px 24px rgba(255, 255, 255, 0.18);
    background: radial-gradient(circle, rgba(252, 252, 252, 0.7) 0%, rgba(255, 255, 255, 0.2) 80%, transparent 100%);
}

/* 语音通话按钮位置优化 */
.call-btn {
    position: absolute;
    bottom: 32px; /* 从顶部定位改为底部定位 */
    left: 50%;
    transform: translateX(-50%);
    background: #6c63ff;
    color: #fff;
    border: none;
    border-radius: 24px;
    padding: 12px 32px;
    font-size: 18px;
    cursor: pointer;
    box-shadow: 0 4px 16px rgba(108, 99, 255, 0.18);
    transition: all 0.2s;
    z-index: 2;
}

.call-btn:hover {
    background: #554eea;
    transform: translateX(-50%) translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* 聊天面板样式 - 优化内部布局 */
.chat-panel {
    flex: 1; /* 充分利用剩余空间 */
    margin: 0;
    display: flex;
    flex-direction: column;
    /* gap: 5px; 从16px增加到24px，增加音频进度条与输入框之间的间距 */
}

/* 聊天卡片样式优化 */
.chat-card {
    background: #fff;
    border-radius: 20px;
    box-shadow: 0 2px 16px rgba(0, 0, 0, 0.06);
    padding: 32px;
    min-height: 150px;
    flex: 1;
    display: flex;
    flex-direction: column;
}

/* 消息列表高度自适应 */
#chatBubbleList {
    flex: 1;
    min-height: 300px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 20px; /* 增加消息间距 */
}

/* 聊天消息样式优化 */
.chat-message {
    font-size: 18px;
    margin-bottom: 12px;
    max-width: 75%; /* 增加最大宽度 */
    padding: 16px 24px; /* 增加内边距 */
    border-radius: 18px;
    word-break: break-word;
    display: block;
    width: fit-content;
}

.chat-message.ai {
    background: #f0f0f0;
    color: #222;
    margin-left: 0;
    margin-right: auto;
}

.chat-message.user {
    background: #6c63ff;
    color: #fff;
    margin-left: auto;
    margin-right: 0;
}

/* 输入区域样式 - 增加内边距和圆角 */
.input-area {
    display: flex;
    align-items: center;
    background: #fff;
    border-radius: 20px; /* 增加圆角 */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    padding: 20px 28px; /* 增加内边距 */
}

/* 页脚样式 - 只保留一个定义 */
.footer {
    text-align: center;
    color: #999;
    font-size: 13px;
    margin: 10px;
    padding: 8px 0;
}

/* 其余样式保持不变 */

.audio-status-container {
    margin-top: 16px;
}

.audio-player {
    width: 100%;
    margin-bottom: 8px;
}

.status {
    padding: 8px 12px;
    border-radius: 8px;
    margin-top: 8px;
    font-size: 14px;
}

.status-success {
    background-color: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
}

.status-error {
    background-color: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
}

.status-info {
    background-color: #d1ecf1;
    color: #0c5460;
    border: 1px solid #bee5eb;
}

.mode-toggle-btn {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: #f0f0f0;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 8px;
    cursor: pointer;
    flex-shrink: 0;
}

.text-input-wrapper {
    flex: 1;
    display: flex;
    gap: 8px;
}

.text-input-wrapper textarea {
    flex: 1;
    height: 32px;
    resize: vertical;
    border-radius: 18px;
    padding: 10px 14px;
    border: 1px solid #e5e5e5;
    font-size: 16px;
    outline: none;
    min-height: 32px;
    max-height: 120px;
    margin-right: 8px;
}

.text-input-wrapper textarea:focus {
    border-color: #6c63ff;
}

.send-btn {
    background: #6c63ff;
    color: #fff;
    border: none;
    border-radius: 16px;
    padding: 8px 20px;
    font-size: 16px;
    cursor: pointer;
    transition: background 0.2s;
    white-space: nowrap;
}

.send-btn:hover:not(:disabled) {
    background: #554eea;
}

.send-btn:disabled {
    background: #ccc;
    cursor: not-allowed;
}

.voice-input-wrapper {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
}

.voice-record-btn {
    width: 200px;
    height: 50px;
    border-radius: 25px;
    background-color: #2196F3;
    border: none;
    color: white;
    font-size: 16px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
}

.voice-record-btn:hover:not(:disabled) {
    background-color: #1976D2;
}

.voice-record-btn:disabled {
    background: #ccc;
    cursor: not-allowed;
}

/* 推荐提问区域样式优化 */
.suggested-questions {
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    padding: 16px 24px;
}

.suggested-title {
    font-size: 14px;
    color: #666;
    margin-bottom: 12px;
}

.suggested-list {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.suggested-question-btn {
    background: #f8f8f8;
    border: 1px solid #e5e5e5;
    border-radius: 16px;
    padding: 8px 16px;
    font-size: 14px;
    color: #333;
    cursor: pointer;
    transition: all 0.2s;
}

.suggested-question-btn:hover {
    background: #e0dfee;
    border-color: #6c63ff;
    color: #564fb3;
}

/* 响应式设计 */
@media (max-width: 1400px) {
    .main-layout {
        gap: 16px;
    }

    .session-panel {
        width: 200px; /* 进一步减小响应式宽度 */
    }

    .avatar-panel {
        width: 320px;
    }
}

@media (max-width: 1200px) {
    .main-layout {
        flex-direction: column;
    }

    .session-panel {
        width: 100%;
        height: 120px;
    }

    .avatar-panel {
        width: 100%;
        height: 300px;
    }

    .avatar-box {
        height: 100%;
    }
}

@media (max-width: 768px) {
    .content-wrapper {
        width: 95%;
    }

    .nav-header {
        padding: 16px 0;
    }

    .back-btn {
        padding: 6px 16px;
        font-size: 14px;
    }

    .chat-card {
        padding: 16px;
        border-radius: 16px;
    }

    .input-area {
        padding: 12px 16px;
        border-radius: 12px;
    }

    .suggested-questions {
        padding: 12px 16px;
    }

    .suggested-question-btn {
        padding: 4px 12px;
        font-size: 13px;
    }
}
</style>